<script setup lang="ts">
interface IOption {
  label: string
  value: any
}

interface IProps {
  options: IOption[]
}

const { options } = defineProps<IProps>()

const emits = defineEmits(['change'])

const modelValue = defineModel()

function onChange(option: IOption) {
  modelValue.value = option.value
  emits('change', option)
}
</script>

<template>
  <div class="flex gap-12px">
    <ElCheckTag
      v-for="option in options"
      :key="option.value"
      :checked="modelValue === option.value"
      type="primary"
      @change="onChange(option)"
    >
      {{ option.label }}
    </ElCheckTag>
    <slot />
  </div>
</template>
